<script>
export default {
  name: "User",
  data(){
    return{
      userList:[
        {id:9001,name:'jack'},
        {id:9002,name: 'rose'}
      ]
    }
  },
  methods:{
    toUserDetail(userId){
      // `params` 不能与 `path` 一起使用
      this.$router.push({name:'userDetail',params:{id:userId}})
    }
  }
}
</script>

<template>
  <h3>这是用户列表页面</h3>
  <el-table :data="userList" style="width: 100%">
    <el-table-column prop="id" label="编号" width="180" />
    <el-table-column prop="name" label="用户名称" width="180" />
    <el-table-column label="操作" width="220">
      <template #default="scope">
        <el-link type="success" :href="'/home/userDetail/'+scope.row.id" >查看详情</el-link>
        |
        <el-link type="success" href="javascript:void(0)" @click="toUserDetail(scope.row.id)" >查看详情</el-link>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>

</style>